﻿<template>
  <el-dialog v-drag :title = 'dialogSelectTitle' :visible.sync = 'dialogSelectVisible' width = '55%' :before-close = "handleClose">
    <div class = 'page_searchContent'>
      <el-input :placeholder = 'searchNotice' v-model = 'searchKey' prefix-icon = "el-icon-search" clearable></el-input>
    </div>
    <!-- 表格部分 -->
    <div class = 'page_tableContent'>
      <el-table :data = 'table.tableData' style = 'width:100%' stripe highlight-current-row
      @current-change = "handleCurrentChange" ref = 'singleSelectTable'>
        <span v-for = 'item in table.tableColumn'  :key = 'item.indexName'>
          <el-table-column align = 'center'
          :label = 'item.text' v-if = "item.indexName !== 'metauid'">
            <template slot-scope = 'scope'>
              <span>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
        </span>
      </el-table>
    </div>
    <!-- 底部按钮和页码部分 -->
    <div class = 'page_bottomContent'>
      <div class = 'page_btnsContent'>
        <el-button type = 'info' @click = "$emit('giveUpRef')">取 消</el-button>
        <el-button type = "primary" @click = 'handleSubmit'>确 定</el-button>
      </div>
      <div class = 'page_paginationContent'>
        <el-pagination
          background
          @size-change = "handleSizeChange"
          @current-change = "handleCurrentPageChange"
          :current-page.sync = "currentPage"
          :page-size = 'pageSize'
          :pager-count = "5"
          :page-sizes = "[10, 25, 50, 100]"
          layout = "total, sizes, prev, pager, next"
          :total = 'totalLength'>
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['showRefDialog', 'checkedUid', 'totalRefTable'],
  data () {
    return {
      table: {
        tableData: [],
        tableColumn: []
      },
      dialogSelectVisible: false,
      dialogSelectTitle: '',
      searchKey: '',
      searchNotice: '',
      isSearch: false,
      totalData: [],
      filterData: [],
      totalLength: 0,
      currentPage: 1,
      pageSize: 10,
      selectRow: ''
    }
  },
  methods: {
    // 获取所有的元数据表
    getAllMetadata () {
      this.totalData = this.totalRefTable
      this.totalLength = this.totalRefTable.length
      this.showData(this.totalData)
    },
    // 将页码与数据关联
    showData (myData) {
      // 渲染表格的数据存放在 this.tableData 中
      this.table.tableData = []
      if (myData.length) {
        let from = (this.currentPage - 1) * this.pageSize
        let to = this.currentPage * this.pageSize
        if (to > myData.length) {
          to = myData.length
        }
        for (; from < to; from++) {
          this.table.tableData.push(myData[from])
        }
        // 如果有选中的表时
        if (this.checkedUid && this.totalData.length) {
          this.totalData.forEach(val => {
            if (val.metauid === this.checkedUid) {
              this.$refs.singleSelectTable.setCurrentRow(val)
            }
          })
        } else {
          this.$refs.singleSelectTable.setCurrentRow()
        }
      }
    },
    // 表格单选
    handleCurrentChange (row) {
      this.selectRow = row
    },
    // 点击上部的X关闭弹窗时
    handleClose () {
      this.$emit('giveUpRef')
    },
    // 点击确定按钮时
    handleSubmit () {
      if (this.selectRow) {
        this.$emit('sureSelectRef', this.selectRow)
      } else {
        this.$message({
          message: '请选择需要关联的元数据表',
          type: 'warning'
        })
      }
    },
    // 底部页码的部分
    handleSizeChange (val) {
      this.pageSize = val
      // 需要判断是否是检索的数据
      if (this.isSearch) {
        this.showData(this.filterData)
      } else {
        this.showData(this.totalData)
      }
    },
    handleCurrentPageChange (val) {
      this.currentPage = val
      // 需要判断是否是检索的数据
      if (this.isSearch) {
        this.showData(this.filterData)
      } else {
        this.showData(this.totalData)
      }
    }
  },
  watch: {
    showRefDialog: {
      handler: function (val, oldVal) {
        this.dialogSelectVisible = val
        if (val) {
          // 将数据还原
          this.pageSize = 10
          this.currentPage = 1
          this.searchKey = ''
          this.searchNotice = '请输入表名称或uid'
          this.dialogSelectTitle = '选择需要关联的元数据表'
          this.table.tableColumn = [
            {
              text: '元数据表UID',
              indexName: 'metauid'
            },
            {
              text: '元数据表名称',
              indexName: 'metaname'
            },
            {
              text: '元数据表描述',
              indexName: 'metadesc'
            }
          ]
          this.$nextTick(function () {
            this.getAllMetadata()
          })
        }
      },
      deep: true
    },
    // 搜索的功能
    searchKey: {
      handler: function (val, oldVal) {
        // 当检索的内容为空时需要将表格的内容还原
        if (this.$trim(val) === '') {
          this.pageSize = 10
          this.currentPage = 1
          this.totalLength = this.totalData.length
          this.isSearch = false
          // 调用方法进行页面渲染
          this.showData(this.totalData)
        } else {
          // 检索结果的数据存放在 this.filterData 中
          this.filterData = []
          this.totalData.forEach((value, index) => {
            if (value.metauid.indexOf(this.searchKey) !== -1 || value.metaname.indexOf(this.searchKey) !== -1) {
              this.filterData.push(value)
            }
          })
          this.isSearch = true
          this.currentPage = 1
          this.totalLength = this.filterData.length
          // 调用方法进行页面渲染
          this.showData(this.filterData)
        }
      },
      deep: true
    }
  }
}
</script>
